<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@include file="../common/base.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>完整demo</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <script type="text/javascript" charset="utf-8" src="${ctx}/js/article/edit.js"></script>
    <script type="text/javascript" charset="utf-8" src="${ctx}/js/jquery/ajaxfileupload.js"></script>
    <!-- 实例化编辑器 -->
    <style type="text/css">
        .panel-body {
		    padding: 0px;
		}
        .col-sm-3 {
			width: 15%;
			float: left;
		}
		.col-sm-8 {
			width: 74.4%;
		}
		.col-sm-9 {
			width: 85%;
			float: left;
		}
		.col-sm-2 {
		    width: 7.666667%;
		}
		.img{
			
			margin-left: 18px;
		}
		 .form-control{
		    display: block;
		    width: 100%;
		    height: 34px;
		    padding: 6px 12px;
		    font-size: 14px;
		    line-height: 1.428571429;
		    color: #555;
		    vertical-align: middle;
		    background-color: #fff;
		    border: 1px solid #ccc;
		    border-radius: 4px;
		    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		    -webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
		}
		.form-groupEdit{
			width:50%;
		}
		.form-groupEdit div{
			display: inline-block;
			margin-left: "10px";
		}
		#edui1{
			width:"900px";
		}
    </style>
</head>
<body>
	<section class="panel panel-default">
		<div class="panel-body"><%-- 
			<div class="form-group">
				<input type="hidden" name="id" value="${article.id }" id="id">
				<input type="hidden" name="content" value='${article.content }' id="content">
				<label class="col-sm-2 control-label" >文章标题：</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" 
						placeholder="请输入会员名称" value="${article.title}"
						name="title" id="title"/>
				</div>
				<label class="col-sm-2 control-label">文章类型：</label>
				<div class="col-sm-4">
					<select class="form-control m-b" name="atype" id="atype">
						<option value="">--请选择--</option>
						<c:forEach var="item" items="${aType}">
							<option value="${item.value}" <c:if test="${article.atype==item.value}">selected</c:if> >${item.desc}</option>
						</c:forEach>
					</select>
				</div>
			</div>
		</div>
			<div class="line line-dashed line-lg pull-in"></div>
		<div class="panel-body">
			<div class="form-group">
				<label class="col-sm-2 control-label">文章封面：</label>
				<div class="col-sm-4">
					<input type="file" class="form-control" 
						placeholder="请输入会员名称" value="${article.pic}"
						name="pic" id="pic"/>
				</div>
				<label class="col-sm-2 control-label" >作者：</label>
				<div class="col-sm-4">
					<input type="text" class="form-control" 
						placeholder="请输入作者名称" value="${article.author}"
						name="author" id="author">
				</div>
			</div>
		</div>	
			<div class="line line-dashed line-lg pull-in"></div>
			<div class="line line-dashed line-lg pull-in"></div> --%>
			<div class="line line-dashed line-lg pull-in"></div>
			<header class="panel-heading">
		<div class="doc-buttons">
			<button type="button" id="addArticle" class="btn btn-info marR10">新增</button>
		</div>
			<br/>			<br/>
			
		<div class="panel-body">	
			<div class="form-group">
			<label class="col-sm-2 control-label">文章内容</label>
			<div class="col-sm-8">
				<textarea id="content" name="content" style="height:300px;">${article.content}</textarea>
			</div>
			</div>
		</div>	
		<footer class="panel-footer text-right bg-light lter">
			<input type="button"  id="confirmAddArticle" class="btn btn-success btn-s-xs" value="提交" />
		</footer> </section>
</body>
<script type="text/javascript" src="${ctx}/js/kindeditor/kindeditor.js"></script>
<script type="text/javascript" src="${ctx}/js/kindeditor/lang/zh_CN.js"></script>
<script type="text/javascript">
		//onloadurl();
		var editor;
		//初始化kindEditor
		function kedit(kedit){
			editor = KindEditor.create(kedit, {
				resizeType : 1,
				imageSizeLimit : '5MB', //批量上传图片单张最大容量
			    imageUploadLimit : 20, //批量上传图片同时上传最多个数
				allowPreviewEmoticons : true,
				allowImageUpload : true,
				fullscreenShortcut : false,
				width: '100%',
				uploadJson:rootPath+'/commonImage/uploadImage/article',
				items : [
				 		'source', '|', 'undo', 'redo', '|', 'preview', 'cut', 'copy', 'paste',
				 		'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
				 		'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
				 		'superscript', 'clearhtml', 'quickformat', '|', 'fullscreen', '/',
				 		'formatblock', 'title', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', '|','bold',
				 		'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
				 		'media','table', 'hr', 'emoticons', 'pagebreak', 'link', 'unlink'
				],
				afterBlur:function(){	//此方法保证能传递数据到后台
					this.sync();
				}
			});
		}
		
		$(function(){
			kedit('textarea[name="content"]');
			/* //kedit('textarea[name="advantage"]');
			
			//绑定上传图片按钮
			 bindSelectFile();
			
			//tab切换
			$('.modal-body li').click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			});
			
			//设置删除图标
			$('.parentFileBox>.fileBoxUl>li').hover(function(){
				$(this).find('i').css('display','block');
			},function(){
				$(this).find('i').css('display','none');
			});
			//删除相册图片
			$(document).on("click",".diyCancel",function(){
				var spanId = $(this).parents('li').find('input').val();
				$.each($("#goodsPhotoDiv").children(),function(i,o){
					if(spanId==o.id){
						$(this).remove();
						return false;
					}
				});
				$(this).parents('li').remove();
				webUploader.options.fileNumLimit=webUploader.options.fileNumLimit+1;
			});
			
			//设置列表页默认图片
			$(document).on("click",".parentFileBox>.fileBoxUl>li span",function(){
				var imgSrc = $(this).siblings('img').attr('src');
				$("#defaultImageDiv").empty();
				$("#defaultImageDiv").append('<img src="'+imgSrc+'" style="width:100px"/>');
			});
			
			$('.fileBoxUl').on("mouseover mouseout","li",function(event){
				 if(event.type == "mouseover"){
					 $(this).find('.diyCancel').css('display','block');
					 $(this).find('span').stop().slideDown();
				 }else if(event.type == "mouseout"){
					 $(this).find('.diyCancel').css('display','none');
					 $(this).find('span').stop().slideUp();
				 }
			});
			
			//设置弹出框的位置
			//获取modal的宽度  
			var modalWidth = $("#goodsSkuModal").width();  
			//计算偏移量  
			var left = "-" + parseInt(modalWidth) / 2 + "px";                        
			$(".modal-content").css({"margin-left":left}); */
		});
		
	</script>
</html>